<template>
	<view class="wap">
		<view class="phone flex">
			<view style="color: #333;">手机号：</view>
			<view class="phone-input flex-bet">
				<view class="phone-left">
					<input class="page-form-input" type="digit" name="phone" v-model="phone" maxlength="11" placeholder="请输入手机号">
					</input>
				</view>
				<button class='phone-right' :disabled="disabled"
					@click="getCount">{{!second?'获取验证码':second+'s重新获取'}}</button>
			</view>
		</view>
		<view class="phone flex">
			<view style="color: #333;">验证码：</view>
			<view class="phone-input flex-bet">
				<view class="phone-left">
					<input class="page-form-input" type="digit" name="code" v-model="code" maxlength="6" placeholder="请输验证码">
					</input>
				</view>
			</view>
		</view>
		<view class="cu-form-group" v-if="yzm" style="margin: 40rpx;">
			<move-verify @result='verifyResult' ref="verifyElement"></move-verify>
		</view>
		
		<!-- 生成的图片 -->
		<view v-if="is_new==1 && qr_img != ''" class="section-result flex-x-center flex-y-center">
			<!-- H5采用长按保存图片，app就可以通过按钮保存或分享，微信小程序需要连接到H5再进行长按保存 -->
			<!-- 图片使用 img 标签会好些，可以更好的兼容base64位图片连接的显示 -->
			<img class="image" :src="qr_img" alt="" />
		
		</view>
		
		<view class="bottom-bottom">
			<view class="bottom" @click="changemobile">提交</view>
		</view>
	</view>
</template>

<script>
	import moveVerify from "@/components/helang-moveVerify/helang-moveVerify.vue"
	import {send,changemobile,checkIsLogin} from '../../apirequest/api.js'
	export default {
		components: {
			 "move-verify":moveVerify
		},
		data() {
			return {
				code:'',
				phone:'',
				yzm:false,
				//验证码倒计时
				second: 0,
				disabled: false,
				type:'changemobile',
				isOk:1,
				qr_img:'',
				is_new:0,
			}
		},
		onLoad(options) {
			console.log(options);
			if (options.pid) {
				uni.setStorageSync('parent_id', options.pid);
			} 
		},
		onShow() {
			let that = this;
			checkIsLogin({}).then((res) => {
				
			}).catch(err => {
				console.log(err)
			});
		},
		methods: {
			/* 校验结果回调函数 */
			verifyResult(res){
				console.log(res);
				this.resultData = res;
				this.flag = res.flag;
				this.isOk = res.flag;
				if(res.flag){
					send({mobile:this.phone,event:this.type}).then((res) => {
						if(res.code == 1){
							uni.showToast({
								title:res.msg,
								icon:'success'
							})
							this.disabled = true
							this.second = 60
							let timer = setInterval(() => {
								this.second--;
								if (this.second < 1) {
									clearInterval(timer);
									this.disabled = false
									this.second = 0
								}
							}, 1000)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'error'
							})
							this.$refs.verifyElement.reset();
							this.flag = false;
							this.isOk = false;
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			/* 校验插件重置 */
			verifyReset(){
				this.$refs.verifyElement.reset();

				/* 删除当前页面的数据 */
				this.resultData = {};
			},
			//验证码倒计时
			getCount() {
				
				if(!this.phone){
					uni.showToast({
						title:'请先输入手机号',
						icon:'error'
					})
					return false;
				}else{
					//this.yzm = true;
					if(this.isOk){
						send({mobile:this.phone,type:this.type}).then((res) => {
							if(res.code == 1){
								uni.showToast({
									title:res.msg,
									icon:'success'
								})
								this.disabled = true
								this.second = 60
								let timer = setInterval(() => {
									this.second--;
									if (this.second < 1) {
										clearInterval(timer);
										this.disabled = false
										this.second = 0
									}
								}, 1000)
							}else{
								uni.showToast({
									title:res.msg,
									icon:'error'
								})
							}
						}).catch(err => {
							console.log(err)
						})
					
					}else{
						uni.showToast({
							title:'请先滑动验证',
							icon:'error'
						})
					}
				}					
			},
			changemobile:function(){
				if (!this.phone) {
					uni.showToast({
						title:'请输入手机号',
						icon:'error'
					});
					return;
				}
				if (!this.code) {
					uni.showToast({
						title:'请输入短信验证码',
						icon:'error'
					});
					return;
				}
				let that = this;
				changemobile({mobile:this.phone,code:this.code}).then((res) => {
					if(res.code == 1){
						uni.showToast({
							title:res.msg,
							icon:'success'
						});
            setTimeout(function(){
              uni.reLaunch({
                url:'/pages/person/person'
              })
            },1000);

            // that.is_new = res.data.is_new;
						// that.qr_img = res.data.qr_img;
						// if (res.data.is_new==0||!that.qr_img) {
						// 	var pages=getCurrentPages(), prevPage=null;
						// 	if(pages.length>1){
						// 		setTimeout(function(){
						// 			uni.navigateBack({
						// 				delta:1
						// 			})
						// 		},1000);
						// 	} else {
						// 		let redirect_url = uni.getStorageSync('redirect_url');
						// 		setTimeout(function(){
						// 			uni.reLaunch({
						// 				url:redirect_url||'/pages/index/index'
						// 			})
						// 		},1000);
						// 	}
						// }
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error'
						});
					}
				}).catch(err => {
					console.log(err)
				});
			},
			
			
		}
	}
</script>

<style>
	
	.section-result {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);
		padding: 30rpx 0;
		z-index: 999;
	}
	
	.section-result img {
		width: 640rpx;
	}
	
	.wap .phone{
    align-items: center;
		padding: 19px 14px;
		border-bottom: 1px solid #e4e4e4
	}

	.wap .phone view:nth-child(1) {
		width: 72px;
		color: #bec1c7;
		    font-size: 30rpx;
	}

	.wap .phone .phone-input{
		flex: 1
	}

	.wap .phone .phone-input .phone-left{
		flex: 1
	}

	.wap .phone .phone-input .phone-left .page-form-input{
		flex: 1;
		color: #333333;
	}

	.wap .phone .phone-input .phone-right{
    height: 60rpx;
    line-height: 60rpx;
    background-color: #fe771d;
		color: #FFFFFF;
    font-size: 28rpx;
	}

	.wap .bottom-bottom{
		position: fixed;
		bottom: 14px;
		width: 100%
	}

	.wap .bottom-bottom .bottom{
		margin: 9px 14px;
		text-align: center;
    height: 80rpx;
    line-height: 80rpx;
		color: #fff;
		border-radius: 29px;
		background:linear-gradient(to right,#ffae31,#fe771d);
	}
</style>
